<%@ page contentType="text/html; charset=utf-8"%>
<%@page language="java" pageEncoding="UTF-8"%>
<%@ page import="com.mysql.jdbc.Driver"%>
<%@ page import="java.sql.*"%>

<%
String userName="root";
String userpasswd="";
String dbName="a0713225307";
    request.setCharacterEncoding("UTF-8");
	Class.forName("com.mysql.jdbc.Driver").newInstance();
	String u="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userpasswd+"&useUnicode=true&characterEncoding=UTF-8";
    java.sql.Connection con=java.sql.DriverManager.getConnection(u,"root","");
	String sql="select * from users";
	Statement statement=con.createStatement();
	ResultSet rs=statement.executeQuery(sql);

%>
<!DOCTYPE html>
<html>
<head>
<style>
.one1{width:200px!important;}
.two1{width:200px!important;}
</style>
</head>
<body>

<div style="height:440px;width:100%;">

<table id="contentTable1" class="table  table-striped">

<tr>
<th class="one1">用户名</th>
<th class="two1">用户邮箱</th>
<th class="three1" style="text-align:right;"></th>
</tr>

<tbody id="tb1">
<%
while(rs.next()){

%>	
<tr class="tr1">
<td class="one1">
<%
out.print(rs.getString(1));
%>
</td>
<td  class="two1">
<%
out.print(rs.getString(3));
%>
</td>
<td class="three1" style="text-align:right;">
<img src="../images/delete.png" style="width:20px;height:20px;visibility:hidden;" onclick="deleteUser(event);"/>
</td>
</tr>
<%
}
%>	

</tbody>
</table>
</div>

<div id="page_nav1">
<span id="spanFirst">第一页</span>
		<span id="spanPre">上一页</span>
		<span id="spanNext"><a href="javascript:next1();">下一页</a></span>
		<span id="spanLast"><a href="javascript:last1();">最后一页</a></span>
		第
		<span id="spanPageNum">1</span>
		页/共
		<span id="spanTotalPage">2</span>
		页
</div>
<%
rs.close();
statement.close();
con.close();
%>

<script>
var all_row=$('#tb1 tr');

for(var i=10;i<all_row.length;i++){
	
	all_row.eq(i).css("display","none");
}


var theTable = document.getElementById("tb1");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");

var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");

var numberRowsInTable = theTable.rows.length;
var pageSize = 10;
var page = 1;

//下一页
function next1() {

	hideTable1();
	
	currentRow = pageSize * page;
	maxRow = currentRow + pageSize;
	if ( maxRow > numberRowsInTable )
	maxRow = numberRowsInTable;
	for ( var i = currentRow; i< maxRow; i++ ) {
		theTable.rows[i].style.display = '';
	}
		page++;
	if ( maxRow == numberRowsInTable ){
		nextText1();
		lastText1();
	}
	showPage1();
	preLink1();
	firstLink1();
}

//上一页
function pre1() {

	hideTable1();
	
	page--;

	currentRow = pageSize * page;
	maxRow = currentRow - pageSize;
	if ( currentRow > numberRowsInTable )
	currentRow = numberRowsInTable;
	for ( var i = maxRow; i< currentRow; i++ ) {
		theTable.rows[i].style.display = '';
	}


	if ( maxRow == 0 ) {
		preText1();
		firstText1();
	}
	
	showPage1();
	nextLink1();
	lastLink1();
}

//第一页
function first1() {
	hideTable1();
	page = 1;
	for ( var i = 0; i<pageSize; i++ ) {
		theTable.rows[i].style.display = '';
	}
	showPage1();

	preText1();
	nextLink1();
	lastLink1();
}

//最后一页
function last1() {
	hideTable1();
	page = pageCount1();
	currentRow = pageSize * (page - 1);
	for ( var i = currentRow; i<numberRowsInTable; i++ ) {
		theTable.rows[i].style.display = '';
	}
	showPage1();
	
	preLink1();
	nextText1();
	firstLink1();
}

function hideTable1() {
	for ( var i = 0; i<numberRowsInTable; i++ ) {
	theTable.rows[i].style.display = 'none';
	}
}

function showPage1() {
	pageNum.innerHTML = page;
}

//总共页数
function pageCount1() {
	var count = 0;
	if ( numberRowsInTable%pageSize != 0 ) count = 1; 
	return parseInt(numberRowsInTable/pageSize) + count;
}

//显示链接
function preLink1() { spanPre.innerHTML = "<a href='javascript:pre1();'>上一页</a>"; }
function preText1() { spanPre.innerHTML = "上一页"; }

function nextLink1() { spanNext.innerHTML = "<a href='javascript:next1();'>下一页</a>"; }
function nextText1() { spanNext.innerHTML = "下一页"; }

function firstLink1() { spanFirst.innerHTML = "<a href='javascript:first1();'>第一页</a>"; }
function firstText1() { spanFirst.innerHTML = "第一页"; }

function lastLink1() { spanLast.innerHTML = "<a href='javascript:last1();'>最后一页</a>"; }
function lastText1() { spanLast.innerHTML = "最后一页"; }

//隐藏表格
function hide1() {
	for ( var i = pageSize; i<numberRowsInTable; i++ ) {
		theTable.rows[i].style.display = 'none';
	}

	totalPage.innerHTML = pageCount1();
	pageNum.innerHTML = '1';
	
	nextLink1();
	lastLink1();
}

hide1();

	var x=$('.tr1');
	for(var i=0;i<x.length;i++)
	{
	//	x[i].oldClassName = x[i].className; //首先保存之前的class值
   x[i].onmouseover = function() {
    $(this).attr("class", "highlight"); //鼠标经过时添加class为highlight的值
  var imga=$(this).find('img');
	 imga.css("visibility","visible");
  }

   x[i].onmouseout = function() {
	   $(this).removeAttr("class");
	   var imga=$(this).find('img');
	   imga.css("visibility","hidden");
 // $(this).attr("class", "odd"); //鼠标离开时还原之前的class值
 //  }
	}
		 
}

function deleteUser(e){
	e=e||window.event;
	e.target=e.target||e.srcElement;
	var p=$(e.target).parent().prev().prev().text();
	var param="una='"+p+"'";
	
	$.ajax({
		type:'POST',
		url:'deleteUser.jsp',
		data:param,
		success:function(){
			window.location.href=window.location.href;
		}
	});
}
</script>
</body></html>